<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="./css/cart.css">
</head>

<body>

    <div id="cart">
        <ul>
            <template v-for="(item,index) in shopList">
                <li @click="setShopData(index,'add')">{{'商品'+item.name}}</li>
            </template>
        </ul>
        <button @click='goShopping'>进入购物侧</button>
        <div v-show='showShopList'>
            <div class="cart-title">我的购物车</div>
            <table class="cart-table">
                <tr>
                    <th width="60"><span class="cart-all">全选</span></th>
                    <th>商品</th>
                    <th width="120">单价</th>
                    <th width="100">数量</th>
                    <th width="120">小计</th>
                    <th width="80">操作</th>
                </tr>
                <template v-if='shopData.length>0' v-for="(item,index) of shopData">
                    <tr class="cart-item">
                        <td>
                            <input type="checkbox" checked="checked" class="cart-check" /> 
                            <span>{{item.name}}</span> 
                        </td>
                        <td class="cart-txt-left">
                            <img :src="item.imgUrl" alt="">
                        </td>
                        <td>
                            <span class="cart-price">{{item.pice}}</span>
                        </td>
                        <td>
                            <span class="cart-reduce"  @click="setShopData(item.id,'',false,true)">-</span>
                            <span class="cart-num">{{item.num}}</span> 
                            <span class="cart-add" @click="setShopData(item.id,'add',false,true)">+</span> 
                        </td>
                        <td>
                            <span class="cart-subtotal">{{item.num*item.pice}}</span>
                        </td>
                        <td>
                            <span class="cart-del" @click="setShopData(item.id,'',true,true)">删除</span>
                        </td>
                    </tr>
            </template>
                <tr class="cart-bottom">
                    <td colspan="6">
                        <span class="cart-bottom-span">已选择<span class="cart-total-num">0</span>件商品</span>
                        <span class="cart-bottom-span">总计：<span class="cart-total-price">{{getShopPice()}}</span></span>
                        <span class="cart-bottom-btn">提交订单</span>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/cart.js">
    </script>
</body>

</html>